<template>
  <div>
    <Head-Top></Head-Top>
    <div class="all_con">

      <el-form :model="ruleForm1" status-icon :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
        <div style="display: flex;margin-top: 20px">
          <el-form-item style="margin-left: 20px" label-width="0px" prop="phoneName">
            <el-input size="medium" placeholder="输入手机号或用户名" type="text" v-model="ruleForm1.phoneName"
                      auto-complete="off">
            </el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button class="submit_btn" size="medium" type="primary" @click="submitForm('ruleForm1')">搜索</el-button>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button style="margin-left: 50px" class="submit_btn" size="medium" @click="exportExcel()" type="primary" plain>导出表格</el-button>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button style="margin-left: 50px" class="submit_btn" size="medium" @click="toDetail()" type="primary">财务统计</el-button>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button style="margin-left: 50px" class="submit_btn" size="medium" @click="toOrderCount()" type="primary">订单统计</el-button>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button style="margin-left: 50px" class="submit_btn" size="medium" @click="toPayTypeCount()" type="primary">支付统计</el-button>
          </el-form-item>
        </div>

      </el-form>
      <div class="table_container">
        <table id="out-table" border="0">
            <tr style="color: rgb(51, 51, 51);">
              <th colspan="1" rowspan="1">手机号</th>
              <th colspan="1" rowspan="1">用户名</th>
              <th colspan="1" rowspan="1">推广服务费</th>
              <th colspan="1" rowspan="1">市场津贴</th>
              <th colspan="1" rowspan="1">积分</th>
              <th colspan="1" rowspan="1">帮扶津贴</th>
              <th colspan="1" rowspan="1">重消服务费</th>
              <th colspan="1" rowspan="1">区域消费津贴</th>
              <!--<th colspan="1" rowspan="1">代币</th>-->
              <th colspan="1" rowspan="1">可提现金额/元</th>
              <th colspan="1" rowspan="1">编辑代理商</th>
            </tr>
            <tr v-for="item in finalInfo.tableData" class="tr_d">
              <td>{{item.phone}}</td>
              <td>{{item.realname}}</td>
              <td>{{item.extend}}</td>
              <td>{{item.agora}}</td>
              <td>{{item.integrals}}</td>
              <td>{{item.help}}</td>
              <td>{{item.consume}}</td>
              <td>{{item.subsidy}}</td>
              <!--<td>{{item.token}}</td>-->
              <td>{{item.extend}}</td>
              <td>
                <el-button @click="handleEdit(item.user_id)" size="small" type="primary">编辑</el-button>
              </td>
            </tr>
        </table>
        <div v-show="this.$_.isEmpty(finalInfo.tableData)" style="font-size:14px;border-bottom: 1px solid #ebeef5; height: 60px;display: flex;justify-content: center;align-items: center;color: #999;">
暂无数据
        </div>
        <div class="pageination">
          <span style="float: left" class="demonstration">当前第1页</span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page.sync="finalInfo.currentPage"
            :page-sizes="[10, 20 ,100, 200, 500,1000]"
            :page-size="finalInfo.limit"
            layout="sizes, prev, pager, next"
            :total="finalInfo.allTableData.length">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import HeadTop from '../components/HeadTop'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import {getFinacial,getFinalByParams} from "../api/getData";
  import {mapActions, mapState, mapMutations,mapGetters} from 'vuex'

  export default {
    name: "Financial",
    components: {
      HeadTop,
    },
    computed:{
      ...mapState(['finalInfo'])
    },
    data() {
      let validatePhoneName = (rule, value, callback) => {
        callback();
      }
      return {
        ruleForm1: {
          phoneName: '',
        },
        rules1: {
          phoneName: [
            {validator: validatePhoneName, trigger: 'blur'}
          ]
        },
        date_value1: '',
        date_value2: ''
      }
    },
    methods: {
      ...mapActions(['getFinalList','getFinalListByQuery','getEditAgent']),
      ...mapMutations(['changeFinalList']),
      exportExcel() {
        /* generate workbook object from table */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* get binary string as output */
        let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '财务报表.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      toDetail(){
        this.$router.push({
          path:'/final_count'
        })
      },
      toOrderCount(){
        this.$router.push({
          path:'/order_count'
        })
      },
      toPayTypeCount(){
        this.$router.push({
          path:'/pay_type_count'
        })
      },
      submitForm(formName) {   //根据手机号用户名查询
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let {phoneName}=this.ruleForm1
            this.getFinalListByQuery({requirement:phoneName})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleEdit(user_id){
          this.$router.push({
            path:'/edit_final',
            query:{
              user_id
            }
          })
        this.getEditAgent({user_id})
      },
      handleSizeChange(limit) {
        this.changeFinalList({limit})
      },
      handleCurrentChange(val) {
        this.changeFinalList({val})
      },
    },
    mounted(){
      this.getFinalList()
    }
  }
</script>

<style lang="less" scoped>
  @import "../style/table";

  table {
    width: 1440px;
    text-align: left;
    font-size: 14px;
  }

  th, td {
    border-bottom: 1px solid #ebeef5;
    padding: 16px 10px;
    vertical-align: middle;
    width: 180px;
  }

  .th_wrapper:hover {
    background: #f7f7f7;
  }
</style>

